<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.query.id">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          <el-divider v-show="breadcrumb" />
        </el-breadcrumb>
        <div class="searchMain">
          <!-- ---------------------- 一、头部 -->
          <el-form :inline="true">
            <el-form-item label="目录名称" style="margin-left: 10px">
              <el-input v-model="inputVal"></el-input>
            </el-form-item>
            <el-form-item label="状态" style="margin-left: 35px">
              <el-select placeholder="请选择状态" v-model="searchState">
                <el-option
                  v-for="item in stateVal"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clearSearch">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
          <div>
            <el-link
              v-show="this.$route.query.id"
              :underline="false"
              type="primary"
              style="margin-right: 10px"
              @click="upgoSubject"
              >⬅ 返回学科</el-link
            >
            <el-button class="btn" type="success" size="small" @click="add"
              ><i class="el-icon-edit"></i> 新增学科</el-button
            >
          </div>
        </div>

        <el-alert
          :title="`共${total}条数据`"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 15px"
        >
        </el-alert>
        <el-table :data="directoryList">
          <el-table-column label="序号" type="index" width="80"> </el-table-column>
          <el-table-column label="所属学科" prop="subjectName"> </el-table-column>
          <el-table-column label="目录名称" prop="directoryName"> </el-table-column>
          <el-table-column label="创建者" prop="username"> </el-table-column>
          <el-table-column label="创建日期" prop="addDate">
            <template #default="scoped">
              {{ scoped.row.addDate | date_format }}
            </template>
          </el-table-column>
          <el-table-column label="面试题数量" prop="totals"> </el-table-column>
          <el-table-column label="状态" prop="state">
            <!-- 使用默认插槽 -->
            <template #default="scope">
              <!-- 思路：编写一个格式化的函数，在函数里面写好有效的格式化，最后把格式化的数据return -->
              <!-- {{ 函数() }}  ======> 展示的是函数里的return值 -->
              {{ formatState(scope.row.state) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-link
                :underline="false"
                type="primary"
                style="margin-right: 15px"
                v-if="scope.row.state === 1"
                @click="updataState(scope.row)"
                >禁用</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                style="margin-right: 15px"
                v-else
                @click="updataState(scope.row)"
                >启用</el-link
              >
              <el-link
                :underline="false"
                type="info"
                style="margin-right: 15px"
                v-if="scope.row.state === 1"
                disabled
                @click="edit(scope.row)"
                >修改</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                style="margin-right: 15px"
                v-else
                @click="edit(scope.row)"
                >修改</el-link
              >
              <el-link
                :underline="false"
                type="info"
                style="margin-right: 15px"
                @click="del(scope.row)"
                v-if="scope.row.state === 1"
                disabled
                >删除</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                style="margin-right: 15px"
                v-else
                @click="del(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>

        <directorys-add
          ref="addDirectorysForm"
          :directoryDialog="adddirectDialog"
          @closeDialog="closeAddDialog"
          @getdireList="getDirectoryList"
        ></directorys-add>

        <!-- 分页组件 -->
        <el-pagination
          background
          :total="total"
          :current-page="query.page"
          :page-size="query.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          layout=" prev, pager, next, sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
// import { list as getCompanys } from '@/api/hmmm/companys'
// import { list as getQuestion } from '@/api/hmmm/questions'
import { list as getDirectoryAPI, remove } from '@/api/hmmm/directorys.js'
// import { simple } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
import DirectorysAdd from '@/module-hmmm/components/directorys-add'

export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      breadcrumb: '',
      directoryList: [],
      total: 0,
      query: {
        page: 1,
        pagesize: 10,
        subjectID: this.$route.query.id
      },
      adddirectDialog: false,
      inputVal: '',
      searchState: '',
      stateVal: [
        {
          value: '1',
          label: '已启用'
        },
        {
          value: '0',
          label: '已禁用'
        }
      ],
      params: {
        directoryName: '',
        state: ''
      },
      subjectName: []
    }
  },
  async created () {
    // this.getCompanys()
    // this.getQuestion()
    this.getDirectoryList()
    // console.log(this.$route.query)
    this.getsubjectID()
  },
  methods: {
    async getDirectoryList () {
      const res = await getDirectoryAPI(this.query)
      // console.log(res)
      this.directoryList = res.data.items
      this.total = res.data.counts
      this.query.page = +res.data.page
    },
    // 页码变动时候触发
    pageChange (page) {
      this.query.page = page
      this.getDirectoryList()
    },
    handleSizeChange (sizes) {
      this.query.pagesize = sizes
      this.getDirectoryList()
    },
    formatState (value) {
      // 枚举
      const map = {
        // 如果value为1就是启用
        1: '已启用',
        0: '已禁用'
      }
      return map[value]
    },
    updataState (data) {
      // console.log(data)
      data.state = data.state === 0 ? 1 : 0
      this.$message.success('操作成功')
    },
    // 点击搜索
    async search () {
      this.query.directoryName = this.inputVal
      this.query.state = this.searchState
      // console.log(this.params)
      const res = await getDirectoryAPI(this.query)
      // console.log(res)
      this.directoryList = res.data.items
      this.total = res.data.counts
    },
    // 清除搜索
    clearSearch () {
      this.inputVal = ''
      this.searchState = ''
      this.query = {
        page: 1,
        pagesize: 10
      }
      this.getDirectoryList()
    },
    // 关闭弹框
    closeAddDialog () {
      this.adddirectDialog = false
    },
    // 点击增加键
    add () {
      this.adddirectDialog = true
    },
    async del (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.$message.success('删除成功')
        this.getDirectoryList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 从学科切到目录页
    async getsubjectID () {
      if (this.$route.query) {
        // console.log(this.$route.query.id)
        this.query.subjectID = this.$route.query.id
        await getDirectoryAPI(this.query)
        // const res1 = await simple()
        // console.log(res)
      }
    },
    // 跳转到学科
    upgoSubject () {
      this.$router.push({
        path: '/subjects/list'
      })
    },
    async edit (row) {
      this.adddirectDialog = true
      this.$refs.addDirectorysForm.getEdit(row)
    }

  },
  // 过滤器
  filters: {
    date_format (val) {
      // 过滤器函数的第1个参数，永远表示原本要输出的值（本案例中，表示格式不太好的时间）
      // return 'aaaa' // 真正要输出的页面的值
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped>
.app-container .searchMain {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.app-container .searchMain .btn {
  margin-top: 2px;
}
.app-container .el-pagination {
  margin-top: 15px;
  /* margin-left: 950px; */
  text-align: right;
}
</style>
